<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>回音壁</title>
	<link rel="stylesheet" href="./layui/css/layui.css">
	<link rel="shortcut icon" href="../resources/favicon.ico" th:href="@{/static/favicon.ico}"/>
	<style>
		body{padding: 0;margin: 0;background-color: beige}
		input ,select,button{font-size: 18px;}
		#nav{background-color:#393D49;width: 100%;margin: 0px;font-size: 1.1em;position: fixed;top: 0px;padding: 0px 0px 0px 50px;height: 50px}
		#nothing{height: 50px;}
		#nothing_bottom{height: 85px;}
		.func{border: 1px gray solid;margin:15px auto;display: none;background-color: border: 1px gray solid;margin:15px auto;display: none;background-color: #FFFFFF;}
		table{border-collapse:separate; border-spacing:2px;text-align: left;}
		td:first-child{text-align: right}                           
		#div_login{margin:50px auto;width:317px;}
		#div_register,#div_myUserData{margin: 20px auto;width: 390px;}
		#div_searchSong_key{margin: 0px auto;width: 300px}
		#div_searchSong{margin: 0px auro;padding: 10px;}
		#table_searchSong_result{font-size: 1em;width: 800px;margin: 5px auto;}
		#div_searchSong_page{margin: 5px auto;width: 550px}
		#div_player{z-index:5;position: fixed;width: 100%; bottom: 0px;border: 1px black solid;background-color: #2F4056;height: 50px;color: #dddddd}
		#player_pic_outerlayer,#player_pic_innerlayer,#player_pic_innerlayer_pic{width: 80px;height: 80px;background-color: #2F4056;}
		#player_pic_outerlayer{position: absolute;left: 15%;bottom: 5px;}
		#player_progress_outerlayer{width: 350px;position: absolute;left: 23%;bottom: 10px;}
		#player_name{position: absolute;left: 23%;bottom: 32px;}
		#player_controller{position: absolute;left: 53%;bottom: 10px}
		/*我的歌单CSS格式*/
		.toSelectSongList{cursor:pointer;text-align: center;font-weight: bolder}
		.toSelectSongList:hover{background-color: #5FB878}
		.layui-input,.layui-textarea{width: 400px;}
	</style>
</head>
<body >
<div class="layui-layout layui-layout-admin">
<!--顶部导航栏-->
	<div id="nav" class="layui-header">
		<div class="layui-logo">回音壁</div>
		<ol class="layui-nav layui-layout-left">
			<li id="nav_button_searchSong" class="layui-nav-item"><a href="#" οnclick="return false">搜索歌曲</a></li>
			<li id="nav_button_mySongList" class="layui-nav-item"><a href="#" οnclick="return false">我的歌单</a></li>
			<li id="nav_button_myData" class="layui-nav-item"><a href="#" οnclick="return false">我的信息</a></li>
			<li id="nav_button_login" class="layui-nav-item"><a href="#" οnclick="return false">登录</a></li>
			<li id="nav_button_register" class="layui-nav-item"><a href="#" οnclick="return false">注册</a></li>
		</ol>
	</div>
</div>
<!--上补边-->
<div id="nothing"></div>
<!--登录区-->
<div class="func" id="div_login">
	<table>
        <tr>
            <td><span>账号：</span></td><td><input type="text" id="account" name="account" placeholder="请输入账号"/></td>
        </tr>
        <tr>
            <td><span>密码：</span></td><td><input type="password" id="psw" name="psw" placeholder="请输入密码"/></td>
        </tr>
        <tr>
            <td><span>&nbsp;</span></td><td><button  id="button_login">登录</button></td>
        </tr>
    </table>
</div>
<!--注册区-->
<div id="div_register" class="func" >
	<table>
		<tr>
			<td>账号：</td><td><input type="text" placeholder="请输入账号(任意长度字符)" id="registion_account"/></td>
		</tr>
		<tr>
			<td>密码：</td><td><input type="password" id="registion_psw" placeholder="请输入密码"></td>
		</tr>
		<tr>
			<td>性别：</td><td><select id="registion_sex"><option value="男">男</option><option value="女">女</option></select></td>
		</tr>
		<tr>
			<td>邮箱：</td><td><input type="text" id="registion_email" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>兴趣：</td><td><input type="text" id="registion_interest" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>最喜欢的音乐：</td><td><input type="text" id="registion_favoriteMusic" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>最喜欢的歌手：</td><td><input type="text" id="registion_favoriteSinger" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>自述：</td><td><input type="text" id="registion_readme" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>&nbsp;</td><td><button id="button_register">注册</button></td>
		</tr>
	</table>
</div>
<!--我的信息区-->
<div id="div_myUserData" class="func">
	<table>
		<tr>
			<td>UID：</td><td><input type="text" id="myUserData_uid" readonly /></td>
		</tr>
		<tr>
			<td>账号：</td><td><input type="text" placeholder="请输入账号(任意长度字符)" id="myUserData_account" readonly /></td>
		</tr>
		<tr>
			<td>创建时间：</td><td><input type="text" id="myUserData_registionTime" placeholder="当前账号注册时间" readonly></td>
		</tr>
		<tr>
			<td>性别：</td><td><select id="myUserData_sex"><option value="男">男</option><option value="女">女</option></select></td>
		</tr>
		<tr>
			<td>邮箱：</td><td><input type="text" id="myUserData_email" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>兴趣：</td><td><input type="text" id="myUserData_interest" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>最喜欢的音乐：</td><td><input type="text" id="myUserData_favoriteMusic" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>最喜欢的歌手：</td><td><input type="text" id="myUserData_favoriteSinger" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>自述：</td><td><input type="text" id="myUserData_readme" placeholder="非必选项" value="无"></td>
		</tr>
		<tr>
			<td>&nbsp;</td><td><button id="button_changeUserData">修改</button></td>
		</tr>
	</table>
</div>
<!--我的歌单-->
<div id="div_mySongLists"  class="func">
	<div class="layui-row">
		<div class="layui-col-md2">
			<ul class="layui-nav layui-nav-tree"  lay-filter="div_mySongLists_leftNav" id="div_mySongLists_leftNav">
				<li class="layui-nav-item layui-nav-itemed">
				  <a class="" href="javascript:;" id="mySongList_createList">创建歌单</a>
				</li>
				<li class="layui-nav-item layui-nav-itemed">
					<a href="javascript:;" id="mySongList_deleteList" >删除歌单</a>
				</li>
				<li class="layui-nav-item"><a href="javascript:;" id="mySongList_mySongLists" >我的歌单</a>
					<dl class="layui-nav-child" id="mySongList_mySongLists_item">
				  	
					</dl>
				</li>
			  </ul>
		</div>
	
      <!-- 我的歌单的右侧内容显示区 -->
		<div class="layui-col-md10">
			<div class="layui-tab layui-tab-card" lay-filter="showSongListTabs" lay-allowclose="true">
			  <ul class="layui-tab-title">
				<li class="layui-this" lay-id="11">使用指南</li>
			  </ul>
			  <div class="layui-tab-content">
				<div class="layui-tab-item layui-show">点击顶部导航栏的我的歌单，会从后端获取用户的歌单，并添加到我的歌单的二级菜单列表。<br>点击顶部导航栏也能起到刷新界面的功能。<br><b>点击左侧导航栏的二级菜单，会在右侧显示区新增选项卡，然后点击选项卡查询歌单内容和进行操作。</b></div>
			  </div>
			</div>
		</div>
	</div> 
</div>
<!--搜索歌曲区-->
<div id="div_searchSong" class="func">
	<div id="div_searchSong_key"><input type="text" id="search_getKey" placeholder="输入需要搜索的关键词" />&nbsp;&nbsp;&nbsp;&nbsp;<button id="button_search" >搜索</button></div>
	<div id="div_searchSong_result">
		<p></p>
		<table id="table_searchSong_result" class="layui-table">
		</table>
		<div id="div_searchSong_page"></div>
	</div>
</div>
<!--下部固定播放器区-->
<div id="div_player"  > 
	<!--封面-->
	<div id="player_pic_outerlayer" class="site-doc-icon site-doc-anim player_toSing layui-footer" >
		<div id="player_pic_innerlayer" class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop"><img id="player_pic_innerlayer_pic" src="http://img3.kuwo.cn/star/starheads/500/29/64/2142715150.jpg" alt="封面"></div>
	</div>
	<!--歌名-->
	<div id="player_name">
		<span id="player_name_singName"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="player_name_singTime"></span>
	</div>
	<!--进度条-->
	<div class="layui-progress layui-progress-big" id="player_progress_outerlayer" lay-filter="player_progress" >
    	<div class="layui-progress-bar layui-bg-green" lay-percent="70%"></div>
  	</div>
	<!--播放控制器-->
	<div id="player_controller">
		 <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="player_controller_previous"><i class="layui-icon layui-icon-left"></i>  </button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm player_toSing" id="player_controller_play"><i id="player_controller_play_icon" class="layui-icon">&#xe652;</i></button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="player_controller_next"><i class="layui-icon layui-icon-right"></i></button>
		<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="player_controller_playlist"><i class="layui-icon layui-icon-form"></i></button>
	</div>
	<audio   id="player">
		<source id="player_source" >
	</audio>
</div>
<!--下补边-->
<div id="nothing_bottom"></div>
<!--引入插件-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="./layui/layui.js" charset="utf-8"></script>
<!--顶部按钮功能区-->
<script>
	<!--登录按钮-->
	$("#nav_button_login").click(function(){
		toShow("login");
	})
	<!--注册按钮-->
	$("#nav_button_register").click(function(){
		toShow("register");
	})
	<!--我的信息按钮-->
	$("#nav_button_myData").click(function(){
		if($.cookie("account")==null||$.cookie("psw")==null){
			showResult("登录","尚未登录，无法显示用户信息！")
		}else{
			$.ajax({
				  url:"/user/login",
				  type:"POST",
				  asyn:true,
				  data:{"account":$.cookie('account'),"psw":$.cookie('psw')},
				  success:function(resultData){
				  		let data = JSON.parse(JSON.stringify(resultData));
					  if(data.msg==null){
						  $("#myUserData_account").val(data.account);
						  $("#myUserData_email").val(data.email);
						  $("#myUserData_sex").val(data.sex);
						  $("#myUserData_interest").val(data.interest);
						  $("#myUserData_favoriteMusic").val(data.favorite_music);
						  $("#myUserData_favoriteSinger").val(data.favorite_singer);
						  $("#myUserData_readme").val(data.readme);
						  $("#myUserData_uid").val(data.uid);
						  $("#myUserData_registionTime").val(data.registion_time);
						  toShow("myUserData");
					  }else{
						  showResult("我的信息","获取用户信息失败："+data.msg);
					  }
				  },
				  error:function(resultData){
					  showResult("登录","登录失败："+JSON.stringify(resultData));
				  }
			  });
		}
	});
	<!--搜索歌曲按钮-->
	$("#nav_button_searchSong").click(function(){
		toShow("searchSong");
	})
	<!--我的歌单按钮-->
	$("#nav_button_mySongList").click(function(){
		if($.cookie("uid")==null){
			showResult("登录","尚未登录，无法显示用户歌单！")
		}else{
			$.ajax({
				  url:"/list/getUserLists",
				  type:"POST",
				  asyn:true,
				  data:{"uid":$.cookie('uid')},
				  success:function(resultData){
					  console.log(resultData);
					  //console.log(JSON.stringify(resultData));
					  $("#mySongList_mySongLists_item").empty();
					  for(let i=0;i<resultData.length;i++){
						  let newItem = $("<dd></dd>");
						  let newA    = $("<a></a>");
						  newA.attr("href","javascript:toShowListSong("+JSON.stringify(resultData[i])+")");
						  newA.html(resultData[i].list_name);
						  newItem.append(newA);
						  //console.log("第"+i+"个："+resultData[i].list_name+" "+newA.attr("value"));
						  $("#mySongList_mySongLists_item").append(newItem);
					  }
					  toShow("mySongList");
				  },
				  error:function(resultData){
					  showResult("获取歌单","失败："+JSON.stringify(resultData));
				  }
			  });
		}
		
	})
	<!--辅助显示函数-->
	function toShow(showDiv){
		if(showDiv=="login"){
			$("#div_login").show(0);
		}else{
			$("#div_login").hide(0);
		}
		if(showDiv=="register"){
			$("#div_register").show(0);
			
		}else{
			$("#div_register").hide(0);
		}
		if(showDiv=="myUserData"){
			$("#div_myUserData").show(0);
		}else{
			$("#div_myUserData").hide(0);
		}
		if(showDiv=="searchSong"){
			$("#div_searchSong").show(0);
		}else{
			$("#div_searchSong").hide(0);
		}
		if(showDiv=="mySongList"){
			$("#div_mySongLists").show(0);
		}else{
			$("#div_mySongLists").hide(0);
		}
	}
</script>
<!--用户相关功能实现-->
<script>
$(function(){
	<!--登录功能-->
	$("#button_login").click(function(){
		  if($("#account").val().length<1||$("#psw").val().length<1){
			  showResult("登录","账号密码不能为空！");
		  }else{
			  var account = $("#account").val();
			  var psw = $("#psw").val();
			  $.ajax({
				  url:"/user/login",
				  type:"POST",
				  asyn:true,
				  data:{"account":account,"psw":psw},
				  success:function(resultData){
				  		let data = JSON.parse(JSON.stringify(resultData));
					  if(data.msg==null){
						  showResult("登录","成功，当前用户uid"+data.uid);
						  $.cookie("uid",data.uid);
						  $.cookie("account",data.account);
						  $.cookie("psw",data.psw);
						  showResult("登录","成功:"+$.cookie("uid"));
					  }else{
						  showResult("登录","失败："+data.msg);
					  }
				  },
				  error:function(resultData){
					  showResult("登录","失败："+JSON.stringify(resultData));
				  }
			  });
		  }
	  });
	<!--注册功能-->
	$("#button_register").click(function(){
		let data = new Array();
		data[0] = $("#registion_account").val();
		data[1] = $("#registion_psw").val();
		if(data[0].length<1||data[1].length<1){
			showResult("注册","账号和密码不能为空！");
			return;
		}
		data[2] = $("#registion_sex").val();
		data[3] = $("#registion_email").val();
		data[4] = $("#registion_interest").val();
		data[5] = $("#registion_favoriteMusic").val();
		data[6] = $("#registion_favoriteSinger").val();
		data[7] = $("#registion_readme").val();
		for(let i=2;i<8;i++){
			if(data[i].length<0){
				data[i]="无";
			}
		}
		$.ajax({
			url:"/user/regist",
			type:"POST",
			asyn:true,
			data:{"account":data[0],"psw":data[1],"sex":data[2],
				 "email":data[3],"interest":data[4],"favoriteMusic":data[5],
				  "favoriteSinger":data[6],"readme":data[7]},
			success:function(resultData){
				let data = JSON.parse(JSON.stringify(resultData));
				if(data.msg==null||data.msg.length<1){
					showResult("注册成功","您的uid:"+data.uid);
					$.cookie("uid",data.uid);
					$.cookie("account",data.account);
					$.cookie("psw",data.psw);
				}else{
					showResult("注册失败",data.msg);
				}
			},
			error:function(resultData){
				showResult("遭遇未知错误,",JSON.stringify(resultData));
			}
		});
	})
	<!--修改用户信息-->
	$("#button_changeUserData").click(function(){
		let data = new Array();
		data[0] = $("#myUserData_sex").val();
		data[1] = $("#myUserData_email").val();
		data[2] = $("#myUserData_interest").val();
		data[3] = $("#myUserData_favoriteMusic").val();
		data[4] = $("#myUserData_favoriteSinger").val();
		data[5] = $("#myUserData_readme").val();
		for(let i=1;i<6;i++){
			if(data[i].length<0){
				data[i]="无";
			}
		}
		$.ajax({
			url:"/user/changeUserData",
			type:"POST",
			asyn:true,
			data:{"uid":$.cookie("uid"),"sex":data[0],
				 "email":data[1],"interest":data[2],"favoriteMusic":data[3],
				  "favoriteSinger":data[4],"readme":data[5]},
			success:function(resultData){
				let data = JSON.parse(JSON.stringify(resultData));
				if(data.msg==null||data.msg.length<1){
					showResult("修改","失败");
				}else{
					showResult("修改",data.msg);
				}
			},
			error:function(resultData){
				showResult("遭遇未知错误,",JSON.stringify(resultData));
			}
		});
	})
});
</script>
<!--歌曲相关功能实现-->
<script>
	<!--获取歌单内容-->
	$("#button_search").click(function(){
		if($("#search_getKey").val().length<1){
			showResult("搜索","关键词不能为空！");
		}else{
			$.cookie("key",$("#search_getKey").val())
			toSearchSongs($("#search_getKey").val(),1,1);
		}
	})
	<!--在线搜索函数-->
	function toSearchSongs(key,pn,first){
		showResult("搜索音乐",key+" 第"+pn+"页");
		$.ajax({
				url:"/song/searchSong",
				type:"POST",
				asyn:true,
				data:{"key":key,
					 "pn":pn,"rn":30},
				success:function(resultData){		
					let data = JSON.parse(JSON.stringify(resultData));
					if(data.data==null) {
						showResult("搜索歌曲","失败，获取搜索结果！")
					}else{
						showSongs(data.data,"搜索");
						if(first==1){
							showPagin(data.total);
						}
					}
					
				},
				error:function(data){
					showResult("错误",data+" "+JSON.stringify(data));
				}
			})
	}
	<!--分页显示-->
	function showPagin(total){
		layui.use(['laypage', 'layer'], function(){
  			var laypage = layui.laypage
  			,layer = layui.layer;
			laypage.render({
				elem: 'div_searchSong_page'
				,count: total //数据总数，从服务端得到
				,limit: 30
				,jump: function(obj, first){
					//obj包含了当前分页的所有参数，比如：
					console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
					//console.log(obj.limit); //得到每页显示的条数

					//首次不执行
					if(!first){
					  //do something
						if($.cookie()==null||$.cookie("key")==null){
							showResult("搜索","关键词为空！请输入关键词!");
						}else{
							toSearchSongs($.cookie("key"),obj.curr,0)
						}
					}
				}
			});
		});
	}
	<!--表格显示搜索结果-->
	function showSongs(data,whe){
		$("#table_searchSong_result").empty();
		var t = $("#table_searchSong_result");
		let th = $("<thead></thead");
		let r = document.createElement("tr");
		let h1= document.createElement("th");
		let h2=document.createElement("th");
		let h4 = document.createElement("th");
			h1.innerHTML="歌名"
			h2.innerHTML="歌手[专辑]"
			h4.innerHTML="功能"
		r.append(h1);
		r.append(h2);
		r.append(h4);
		th.append(r);
		t.append(th);
		var tb = $("<tbody></tbody>");
		for(var i=0;i<data.length;i++){
			//tr
			let r = document.createElement("tr");
			//歌名
			let d1 = document.createElement("td");
			d1.innerHTML=data[i].name;
			r.append(d1);
			//歌手[专辑]
			let d2 = document.createElement("td");
			d2.innerHTML=data[i].artist+"["+data[i].album+"]";
			r.append(d2);
			//功能
			let d4 = document.createElement("td");
				//下载
				let a = document.createElement("button");
				a.innerHTML="下载";
				a.setAttribute("class","layui-btn layui-btn-xs toDown");
				a.setAttribute("type","button");
				a.setAttribute("value",JSON.stringify(data[i]));
				//播放
				let b =document.createElement("button");
				b.innerHTML="播放"
				b.setAttribute("class","layui-btn layui-btn-xs layui-btn-normal toSing");
				b.setAttribute("type","button");
				b.setAttribute("value",JSON.stringify(data[i]));
				//收藏
				var c =document.createElement("button");
				c.innerHTML="收藏"
				c.setAttribute("class","layui-btn layui-btn-primary layui-btn-xs toCollect")
				c.setAttribute("type","button");
				c.setAttribute("value",data[i].sid);
				//添加
				var add = document.createElement("button");
				add.innerHTML="添加"
				add.setAttribute("class","layui-btn layui-btn-primary layui-btn-xs toAddSongInSingList")
				add.setAttribute("type","button");
				add.setAttribute("value",JSON.stringify(data[i]));
			d4.append(a);
			let p = document.createElement("span");
			p.innerHTML="&nbsp; "
			d4.append(p)
			d4.append(b);
			let p2 = document.createElement("span");
			p2.innerHTML="&nbsp; "
			d4.append(p2);
			d4.append(c);
			let p3 = document.createElement("span");
			p3.innerHTML="&nbsp;"
			d4.append(p3)
			d4.append(add);
			r.append(d4);
			tb.append(r);
		}
		if(data.length<=0){
			let p3 = $("<span></span>");
			p3.innerHTML="无结果";
			tb.append(p3);
		}
		t.append(tb);
		showResult("搜索","搜索结果已显示！")
	}
	<!--表格区功能函数-->
		<!--表格区功能函数--播放-->
	$(document).on("click",".toSing",function(){
		//console.log("点击了搜索结果功能区的播放按钮！");
		$.cookie("singList",this.value);
		console.log("尝试获取链接："+JSON.parse($.cookie("singList")).name);
		$.ajax({
			url:"/song/getSongPath",
			type:"POST",
			asyn:true,
			data:{"rid":JSON.parse(this.value).rid},
			success:function(data){
				if(data.length<4){
					showResult("查询歌曲","url错误！")
				}else{
					console.log("成功获取歌曲链接："+data);
					if($.cookie("singList").length<1){
						let newSing ={"url":data};
						$.cookie("singList",JSON.stringify(newSing));
						console.log("cookie为空，设置新的cookie"+$.cookie("singList"));
					}else{
						let oldSing = JSON.parse($.cookie("singList"));
						//console.log("测试cookie原本保存的数据："+JSON.stringify(oldSing)+"  //  "+$.cookie("singList"));
						oldSing.url=data;
						//console.log("再次测试JSON对象添加属性："+oldSing.url);
						$.cookie("singList",JSON.stringify(oldSing));
					}
					changePlayer($.cookie("singList"));
					toPlay();
				}
			},
			error:function(data){
				showResult("遭遇错误",JSON.stringify(data));
			}
		})
	})
		<!--表格区功能函数--下载-->
	$(document).on("click",".toDown",function(){
		let rid =JSON.parse(this.value).rid ;
		$.ajax({
			url:"/song/getSongPath",
			type:"POST",
			asyn:true,
			data:{"rid":rid},
			success:function(resultData){
				if(resultData.length<4){
					showResult("查询歌曲","查询歌曲url错误！")
				}else{
					$("#nothing_bottom").empty();
					let a = $("<a id='test_a' ></a>").attr("href",resultData).attr("target","_blank");
					$("#nothing_bottom").append(a);
					$("#test_a")[0].click();
					$("#nothing_bottom").empty();
				}
			},
			error:function(data){
				showResult("遭遇错误",JSON.stringify(data));
			}
		})
	})
		<!--表格区功能函数--收藏-->
	$(document).on('click','.toCollect',function(){
		if($.cookie("uid")==null){
			showResult("用户登录","尚未登录，无法收藏歌曲！")
		}else{
			$.cookie("currentSong",this.value);
			console.log("当前的歌曲sid:"+this.value);
			$.ajax({
				  url:"/list/getUserLists",
				  type:"POST",
				  asyn:true,
				  data:{"uid":$.cookie('uid')},
				  success:function(resultData){
					  console.log(resultData);
					  let d = $("<div></div>")
					  let theLists
					  if(resultData.length>0){
						  theLists=$("<table class=\"layui-table\" ></table>");
						  for(let i=0;i<resultData.length;i++){
							  let tr = $("<tr></tr>")
							  let d1 = $("<td></td>")
							  let b1 = $('<button class="layui-btn layui-btn-sm toSelectSongList" ></button>').html(resultData[i].list_name);
							  b1.attr("value",resultData[i].lid);
							  //console.log("测试表单的value值 "+b1.attr("value"));
							  d1.append(b1);
							  tr.append(d1);
							  theLists.append(tr);
						  }
					  }else{
						  theLists="当前用户无歌单，请先创建歌单";
					  }
					  d.append(theLists);
					  
					  layui.use('layer', function(){ 
						  
						  var  layer = layui.layer;
						  layer.close(layer.index);
						  
						  var index =  layer.open({
							  type:1
							  ,title:'选择歌单'
							  ,offset:'auto'
							  ,btn:'取消'
							  ,shade:0.3
							  ,id:"div_show_theSongLists"
							  ,shadeClose:true
							  ,content:d.html()
							  ,yes:function(){
								  layer.close(index);
							  }
						  })
					  });
				  },
				  error:function(resultData){
					  showResult("获取歌单失败",JSON.stringify(resultData));
				  }
			  });
		}
	})
		<!--表格区功能函数--删除-->
	$(document).on('click','.toDelete',function(){
		var data = JSON.parse(this.value);
		$.ajax({
			url:"/list/listDelSong",
			type:"POST",
			asyn:true,
			data:{"lid":data.lid,"sid":data.sid},
			success:function(data){
				showResult("删除结果",data.msg);
			}
			,error:function(data){
				showResult("错误信息",data);
			}
		})
	})
		<!--表格区功能函数--添加到播放列表-->
	$(document).on('click','.toAddSongInSingList',function(){
		let playlist ;
		if($.cookie("playlist")==null){
			playlist=new Array();
		}else{
			playlist=JSON.parse($.cookie("playlist"));
		}
		let currentSong = JSON.parse(this.value);
		$.ajax({
			url:"/song/getSongPath",
			type:"POST",
			asyn:true,
			data:{"rid":currentSong.rid},
			success:function(data){
				if(data==null||data.length<4){
					showResult("查询歌曲","url错误！添加到播放列表失败！")
				}else{
					currentSong.url=data;
					console.log("成功获取歌曲链接："+currentSong.url);
					playlist.push(currentSong);
					//console.log("当前播放列表:"+JSON.stringify(playlist));
					$.cookie("playlist",JSON.stringify(playlist))
					showResult("添加","歌曲："+currentSong.name+" 已成功加入播放列表！")
				}
			},
			error:function(data){
				showResult("遭遇错误",JSON.stringify(data));
			}
		})
		
	})
	<!--展示播放列表-->
	$("#player_controller_playlist").click(function(){
		//console.log(resultData);
		let d = $("<div></div>")
		let theLists
		if($.cookie("playlist")!=null){
			let playlist=JSON.parse($.cookie("playlist"));
		    theLists=$("<table class=\"layui-table\" ></table>");
		    $.each(playlist,function(idx,obj){
				console.log("测试显示当前播放列表："+JSON.stringify(obj));
				let tr = $("<tr></tr>")
			    let d1 = $("<td></td>")
			    let b1 = $('<button class="layui-btn layui-btn-sm toSwitchSong" ></button>').html(obj.name+"["+obj.artist+"]");
			    b1.attr("value",JSON.stringify(obj));
			  //console.log("测试表单的value值 "+b1.attr("value"));
			    d1.append(b1);
			    tr.append(d1);
			    theLists.append(tr);
			})
		}else{
		  theLists="当前播放歌单无内容，请先添加内容！";
		}
		d.append(theLists);

		layui.use('layer', function(){ 

		  var  layer = layui.layer;
		  layer.close(layer.index);

		  var index =  layer.open({
			  type:1
			  ,title:'播放列表'
			  ,offset:'auto'
			  ,btn:'取消'
			  ,shade:0.3
			  ,id:"div_show_theSongLists"
			  ,shadeClose:true
			  ,content:d.html()
			  ,yes:function(){
				  layer.close(index);
			  }
		  })
		});		
	})
		<!--展示播放列表--切换歌曲-->
	$(document).on('click','.toSwitchSong',function(){
		//console.log("测试，展示切换歌曲选择的内容："+this.value);
		changePlayer(this.value);
		toPlay();
	})
	<!--播放器对象-->
	var audio = document.getElementById("player");
	$("#player").bind('ended', function(){	
		 console.log("当前歌曲已经播放完毕："+$.cookie("currentPlayingSong"))
		$("#player_controller_next").click();
	})
	<!--点击封面或播放按钮进行播放-->
	$(".player_toSing").on("click",function(){

		console.log(audio.duration);
		if(audio.duration>0){
			//console.log("测试点击播放按钮是否进入了播放程序");
			if(audio.paused){
				console.log("用户点击了播放按钮!")
				toPlay();
			}else{
				console.log("用户点击了暂停按钮!")
				toPause();
			}
			
		}else{
			showResult("播放器","播放器无音乐链接 ！");
			toPause();

		}
	})
	var flag
	<!--设置播放器-->
	function changePlayer(newSing){
		let sing = JSON.parse(newSing);
		console.log("播放器设置函数接收到："+newSing);
		audio.src=sing.url;
		//$("#player_source").attr("src",sing.url);
		//console.log("设置的url:"+sing.url+" / 从source获得的src"+$("#player_source").attr("src"));
		$("#player_name_singName").html(sing.name);
		$("#player_name_singTime").html(audio.currentTime+"/"+audio.duration);
		console.log("设置的封面："+sing.pic);
		$("#player_pic_innerlayer_pic").attr('src',sing.pic);
		$("#player_pic_innerlayer_pic").attr('alt',sing.name);
		$.cookie("currentPlayingSong",sing.sid);
		console.log("歌曲："+$.cookie("currentPlayingSong")+"测试是否设置成功："+$("#player_pic_innerlayer_pic").attr('src'))
	}
	
	<!--播放音乐-->
	function toPlay(){
		audio.play();
		let total = audio.duration;
		let currentTime ;
		let point ;
		$("#player_controller_play_icon").html("&#xe651;");
		flag = setInterval(function(){
			total = audio.duration;
			currentTime = audio.currentTime;
			point = Number((currentTime/total)*100).toFixed();
			//console.log("已播放："+currentTime+" / "+total+" = "+currentTime/total+" = "+point);
			$("#player_name_singTime").html(toConversion(currentTime)+"/"+toConversion(total));
			layui.use('element', function () {
    			var element = layui.element;
				element.progress('player_progress', point+"%");
			});
		},1000)
	}
	function toPause(){
		audio.pause();
		$("#player_controller_play_icon").html("&#xe652;");
		clearInterval(flag);
	}
	<!--切换列表播放歌曲-->
	$("#player_controller_previous").click(function(){
		if($.cookie("playlist")==null){
			showResult("播放列表","当前播放列表为空！");		
		}else  {
			let previousSong;
			let previousNum=-1; //前一个歌曲在播放列表的位置。
			let totalNum = 0 ; //播放列表的歌曲总数。
			let json = JSON.parse($.cookie("playlist"));
			$.each(json,function(idx,obj){
				console.log(idx+" "+obj.sid+" /"+$.cookie("currentPlayingSong"));
				if($.cookie("currentPlayingSong")==obj.sid){
					previousNum=idx-1;
					if(idx==0){
						previousNum=-2;
					}
				}
				totalNum+=1;
			})
			if(previousNum==-2){ //当前播放器播放的音乐在列表第一个
				previousNum=totalNum-1;
			}else if(previousNum==-1){ //没有找到。
				previousNum=0;
			}
			previousSong = json[previousNum];
			changePlayer(JSON.stringify(previousSong));
			toPlay();
		}
					
	})
	$("#player_controller_next").click(function(){
		if($.cookie("playlist")==null){
			showResult("播放列表","当前播放列表为空！");		
		}else  {
			let nextSong;
			let nextNum=-1; //前一个歌曲在播放列表的位置。
			let totalNum = 0 ; //播放列表的歌曲总数。
			let json = JSON.parse($.cookie("playlist"));
			$.each(json,function(idx,obj){
				//console.log(idx+" "+obj.sid+" /"+$.cookie("currentPlayingSong"));
				if($.cookie("currentPlayingSong")==obj.sid){
					nextNum=idx+1;
				}
				totalNum+=1;
			})
			if(nextNum>=totalNum){ //当前播放器播放的音乐在列表最后一个
				nextNum=0;
			}else if(nextNum==-1){ //没有找到。
				nextNum=0;
			}
			nextSong = json[nextNum];
			
			changePlayer(JSON.stringify(nextSong));
			toPlay();
		}
	})
	<!--求分秒-->
	function toConversion(date){
		let minutes = Math.floor(date/60);
		let seconds = Math.floor((date%60)/1)
		seconds=(seconds.length==1)?'0'+seconds:seconds;
		return minutes+":"+seconds;
	}
</script>
<!--歌单相关的功能实现-->
<script>
	<!--显示歌单内容-->
	function showListSongs(data,lid){
		let tab = $("<table class=\"layui-table\" ></table>");
		let th = $("<tr></tr>");
		let thead =$("<thead></thead");
		let h1 = $("<th>歌名</th>")
		let h2 = $("<th>歌手</th>")
		let h3 = $("<th>时长</th>")
		let h4 = $("<th>功能</th>")
		th.append(h1).append(h2).append(h3).append(h4);
		thead.append(th);
		tab.append(thead);
		for(let i=0;i<data.length;i++){
			let  current = data[i];
			current.lid= lid;
			let tr = $("<tr></tr>")
			let d1 = $("<td></td>")
			let d2 = $("<td></td>")
			let d3 = $("<td></td>")
			let d4 = $("<td></td>")
			let b1 = $("<button data-method=\"operation\" class=\"layui-btn layui-btn-xs layui-btn-normal toOperate\" >操作</button>")
			d1.html(current.name)
			d2.html(current.artist)
			d3.html(current.songtime)
			b1.attr("value",JSON.stringify(current))
			//console.log("测试查询歌单时添加lid属性,第 "+i+" 个："+b1.attr("value"))
			d4.append(b1)
			tr.append(d1).append(d2).append(d3).append(d4)
			tab.append(tr)
		}
		
		return tab;
	}
	<!--获取歌单内容-->
	function toShowListSong(value){
		console.log("用户点击了歌单："+value.list_name);
		if(value.lid==null){
			showResult("歌单","lid为空，可能歌单已被删除，无法查找数据！");
		}else  if(true) {
			$.ajax({
				url:"/list/listGetSongs"
				,type:"POST"
				,asyn:true
				,data:{"lid":value.lid}
				,success:function(resultData){
					let res ="";
					//console.log(resultData[0]+" "+JSON.stringify(resultData[0]));
					for(let i;i<resultData.length;i++){
						res = res+";"+resultData[i].name;
					}
					console.log("获取到的歌单内容："+res);
					let d = $("<div></div");
					let p = $("<p></p>");
					let span1 = $("<span></span");
					let b1 = $("<button class=\"layui-btn layui-btn-sm toChangeSongListIntroduce \" >修改自述</button>");
					span1.html("<b> 歌单自述：</b>"+value.introduce);
					//console.log(value.lid+" "+value.list_name+" "+value.introduce+" "+JSON.stringify(value));
					b1.val(JSON.stringify(value));
					//console.log(b1.val());
					p.append(b1).append(span1);
					let tab = showListSongs(resultData,value.lid);
					d.append(p).append(tab);
					layui.use(['table','element'],function(){
						var element = layui.element;
						var table = layui.table;
						element.tabAdd('showSongListTabs',{
							title:value.list_name
							,content:d.html()
							//"<table class=\"layui-hide\" id=\"showSongListTabl_item_"+value.lid+"\" class=\"layui-table\"></table>"
							,id:value.lid
						});	
						
					})
				}
				,error:function(data){
					showResult("遭遇错误","获取歌单内容失败:"+data);
				}
			})
		} 
	}
	<!--弹窗操作-->
	layui.use('layer', function(){ 
		var  layer = layui.layer;
		$(document).on('click','.toOperate',function(){
			//console.log('用户点击了歌单功能区的按钮：'+this.value);
			let left = this.pageX||window.event.clientX+document.body.scrollLeft;
			let top = this.pageY||window.event.clientY+document.body.scrollTop;
			let location='r'
			if((left-200)>0&&(top-60)>0){
				location=[(top-60)+'px',(left-200)+'px']
			}
			//console.log("鼠标当前位置"+left+" "+top);
			let d =  $("<div></div>")
			let play = $("<button class=\"layui-btn layui-btn-sm layui-btn-normal toSing\" >播放</button>&nbsp;&nbsp;")
			play.val(this.value)
			let down = $("<button class=\"layui-btn layui-btn-sm layui-btn-normal toDown\" >下载</button>&nbsp;&nbsp;")
			down.val(this.value)
			let collect = $("<button class=\"layui-btn layui-btn-sm layui-btn-normal toCollect\" >收藏</button>&nbsp;&nbsp;")
			collect.val(JSON.parse(this.value).sid);
			let toDelete = $("<button class=\"layui-btn layui-btn-sm layui-btn-normal toDelete\" >删除</button>&nbsp;&nbsp;");
			toDelete.val(this.value)
			let toAdd = $("<button class=\"layui-btn layui-btn-sm layui-btn-normal toAddSongInSingList\" >添加</button>")
			toAdd.val(this.value);
			d.append(play).append(down).append(collect).append(toDelete).append(toAdd);
			layer.close(layer.index);
			var index = layer.open({
				type:1
				,offset:location
				,id:'optation'+left
				,content:d.html()
				,btn:'关闭'
				,title:'操作:'
				,btnAlign:'c'
				,shade:0
				,yes:function(){
					layer.close(index);
				}
			});
		})
	})
	<!--收藏歌曲--选择歌单-->
	$(document).on('click','.toSelectSongList',function(){
		var lid = this.value;
		console.log("用户选择歌单lid："+lid);
		if($.cookie("currentSong")==null||lid==null){
			showResult("遭遇错误","无id信息，无法收藏歌曲！");
		}else{
			$.ajax({
				url:"/list/listAddSong",
				type:"POST",
				asyn:true
				,data:{"lid":lid,"sid":$.cookie("currentSong")}
				,success:function(data){
					showResult("收藏操作",data.msg)
				}
			})
		}
		
	})
	<!--修改歌单信息-->
	$(document).on('click','.toChangeSongListIntroduce',function(){
		//console.log('用户想要修改歌单自述信息'+this.value);
		let oldData = JSON.parse(this.value);
		//console.log(oldData.list_name+" "+oldData.introduce);
		let d0=createNewForm(oldData);
		layui.use('layer',function(){
			var layer = layui.layer;
			var index = layer.open({
				type:1
				,id:'createSongList'
				,title:'修改歌单'
				,shade:0.3
				,area:'550px'
				,content:d0.html()
				,btn:['创建','取消']
				,yes:function(){
					let listName = $("#createSongList_list_name").val();
					let introduce = $("#createSongList_introduce").val();
					if(listName.length<1){
						showResult("提示","表单名不能为空！");
					}else if(oldData.lid==null){
						showResult("提示","出现错误，歌单编号为空！")
					}else{
						if(introduce.length<1){
							introduce="无内容"
						}
						$.ajax({
							url:"/list/changeList",
							type:"POST",
							asyn:true
							,data:{"lid":oldData.lid,"listName":listName,"introduce":introduce,"open":0}
							,success:function(data){
								if(data.msg!=null){
									showResult("歌单","修改结果："+data.msg);
								}else{
									showResult("歌单","无返回结果");
								}
							}
							,error:function(data){
								showResult("错误",data)
							}
						})
					}
				}
				,btn2:function(){}
			})
		})
	})
	<!--创建新表单-->
	function createNewForm(data){
		<!--创建新表单-->
		let d0 = $("<div></div>");
		let form = $('<form class="layui-form" action=""></form>')
		let d1 = $('<div class="layui-form-item"></div>')
			let l1 = $('<label class="layui-form-label " for="createSongList_list_name">歌单名称</label>')
			let dd1 = $('<div class="layui-input-block"></div>')
				let input1 = $('<input type="text" name="createSongList_list_name" id="createSongList_list_name" required  lay-verify="required" placeholder="请输入歌单名称" autocomplete="off" class="layui-input">')
		let d2 = $('<div class="layui-form-item"></div>')
			let l2 = $('<label class="layui-form-label" for="createSongList_introduce" >歌单自述</label>')
			let dd2 = $('<div class="layui-input-block"></div>')
				let textarea = $('<textarea name="desc" id="createSongList_introduce"  placeholder="请输入歌单自述" class="layui-textarea"></textarea>')
		//console.log("测试修改歌单信息测")
		if(data!=null){
			textarea.html(data.introduce);
			input1 = $('<input type="text" name="createSongList_list_name" id="createSongList_list_name" required  lay-verify="required" placeholder="请输入歌单名称" autocomplete="off" class="layui-input" value="'+data.list_name+'" >')
		}
		dd1.append(input1);
		d1.append(l1).append(dd1);
		dd2.append(textarea);
		d2.append(l2).append(dd2);
		form.append(d1).append(d2);
		d0.append(form);

		return d0;
	}
	<!--创建新歌单-->
	$("#mySongList_createList").click(function(){
		let d0=createNewForm();
		<!--显示新表单-->
		layui.use('layer',function(){
			var layer = layui.layer;
			var index = layer.open({
				type:1
				,id:'createSongList'
				,title:'创建新表单'
				,shade:0.3
				,area:'550px'
				,content:d0.html()
				,btn:['创建','取消']
				,yes:function(){
					let listName = $("#createSongList_list_name").val();
					let introduce = $("#createSongList_introduce").val();
					if(listName.length<1){
						showResult("提示","表单名不能为空！");
					}else if($.cookie("uid")==null){
						showResult("提示","用户信息为空，请先登录！")
					}else{
						if(introduce.length<1){
							introduce="无内容"
						}
						$.ajax({
							url:"/list/createList",
							type:"POST",
							asyn:true
							,data:{"uid":$.cookie("uid"),"listName":listName,"introduce":introduce,"open":0}
							,success:function(data){
								if(data.msg!=null){
									showResult("歌单","创建失败："+data)
								}else{
									layer.close(index);
									showResult("创建新歌单","若想刷新请点击我的歌单按钮,<br>成功");
								}
							}
							,error:function(data){
								showResult("错误",data)
							}
						})
					}
				}
				,btn2:function(){}
			})
		})
	})
	<!--删除歌单-->
	$("#mySongList_deleteList").click(function(){
		console.log("用户点击了删除歌单！");
		if ($.cookie("uid")==null) showResult("删除歌单","当前无用户，请先登录！")
		else
		$.ajax({
			  url:"/list/getUserLists",
			  type:"POST",
			  asyn:true,
			  data:{"uid":$.cookie('uid')},
			  success:function(resultData){
				  console.log(resultData);
				  let d = $("<div></div>")
				  let theLists
				  if(resultData.length>0){
					  theLists=$("<table class=\"layui-table\" ></table>");
					  for(let i=0;i<resultData.length;i++){
						  let tr = $("<tr></tr>")
						  let d1 = $("<td></td>")
						  let b1 = $('<button class="layui-btn layui-btn-sm toDeleteSongList" ></button>').html(resultData[i].list_name);
						  b1.attr("value",resultData[i].lid);
						  //console.log("测试表单的value值 "+b1.attr("value"));
						  d1.append(b1);
						  tr.append(d1);
						  theLists.append(tr);
					  }
				  }else{
					  theLists="当前用户无歌单，请先创建歌单";
				  }
				  d.append(theLists);

				  layui.use('layer', function(){ 

					  var  layer = layui.layer;
					  layer.close(layer.index);

					  var index =  layer.open({
						  type:1
						  ,title:'选择歌单'
						  ,offset:'auto'
						  ,btn:'取消'
						  ,shade:0.3
						  ,id:"div_show_theSongLists"
						  ,shadeClose:true
						  ,content:d.html()
						  ,yes:function(){
							  layer.close(index);
						  }
					  })
				  });
			  },
			  error:function(resultData){
				  showResult("获取歌单失败",JSON.stringify(resultData));
			  }
		  });
	})
	<!--删除歌单--功能实现-->
	$(document).on('click','.toDeleteSongList',function(){
		var lid = this.value;
		console.log("用户选择删除歌单lid："+lid);
		if($.cookie("uid")==null||lid==null){
			showResult("遭遇错误","无id信息，无法删除歌单！");
		}else{
			$.ajax({
				url:"/list/deleteList",
				type:"POST",
				asyn:true
				,data:{"lid":lid,"uid":$.cookie("uid")}
				,success:function(data){
					showResult("删除歌单操作","若想刷新请点击我的歌单按钮,<br>"+data.msg)
					//window.location.reload()
				}
			})
		}
	})
</script>
<!--使用layui的一些代码-->
<script>
		<!--显示Loading层-->
		function showLoading(){
			layui.use('layer',function(){
			var layer = layui.layer;
			layer.load(1, {
				id:"loading"
  				,shade: [0.1,'#fff']
				,time:1500
				,shadeClose:true
			});  
			
		})
		}
		<!--显示提示信息-->
		function showResult(title, msg){
			layui.use('layer',function(){
				var layer = layui.layer;
				layer.alert(msg, {
					skin: 'layui-layer-lan'
    				,closeBtn: 0
    				,anim: 4 //动画类型
					,shade:0.3
					,shadeClose:true
					,time:1500
					,title:title
					,id:'result'
  				});
			})
		}
	
		var player = document.getElementById("player");
		<!--循环动画必备-->
		layui.use([ 'form', 'layer','element' ,'jquery'], function () {
			var $ = layui.jquery; 
			var element = layui.element;
			var layer = layui.layer;
			var form = layui.form;
			form.render();
			//演示动画开始
			$('.site-doc-icon .layui-anim').on('click', function(){
			var othis = $(this), anim = othis.data('anim');

			//停止循环
			if(othis.hasClass('layui-anim-loop')){
				return othis.removeClass(anim);
			}
			othis.removeClass(anim);
			setTimeout(function(){
				othis.addClass(anim);
			});
			//恢复渐隐
			if(anim === 'layui-anim-fadeout'){
				setTimeout(function(){
					othis.removeClass(anim);
				}, 2000);
			}
			});
        //演示动画结束
		 })
		//进度条
  
</script>
</body>
</html>
